<template>
  <div class="p-5">
    <n-form ref="formRef" :model="form" :rules="rules" :show-label="false">
      <n-form-item path="content">
        <n-input v-model:value="form.content" placeholder="说两句吧～" type="textarea"/>
      </n-form-item>

      <n-form-item>
        <div class="flex justify-end w-full">
          <n-button :loading="loading" size="small" type="primary" @click="submit">回复</n-button>
        </div>
      </n-form-item>
    </n-form>
  </div>
</template>
<script lang="js" setup>
import {createDiscreteApi, NButton, NForm, NFormItem, NInput} from "naive-ui";


const props = defineProps({
  post_id: {
    type: [String, Number],
    required: true
  }
})

const emits = defineEmits(['success'])

const formRef = ref();
// 表单数据
const form = reactive({
  content: ""
})

const loading = ref(false)

// 规则
const rules = {
  content: [
    {
      required: true,
      message: "请输入评论内容",
      trigger: "blur"
    }
  ]
}


const submit = () => {
  formRef.value.validate((errors) => {
    if (errors) return;

    useHashAuth(async () => {
      loading.value = true;
      const t = {
        content: form.content,
        post_id: parseInt(props.post_id),
        reply_id: 0,
      }
      const {error,data} = await useReplyPostApi(t)
      loading.value = false;
      if (error.value) return
      // 评论成功，通知父组件刷新数据
      emits('success', data.value);

      const {message} = createDiscreteApi(['message'])

      message.success("评论成功")
      form.content = ""
    })
  })
}


</script>


<style scoped>

</style>
